<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="fm" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <title>实名认证</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="js/jquery.bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="js/plugins/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
    <style type="text/css">
        #realAuthForm input ,#realAuthForm select{
            width: 260px;
        }
        .idCardItem{
            width: 160px;
            height: 150px;
            float:left;
            margin-right:10px;
            border: 1px solid #e3e3e3;
            text-align: center;
            padding: 5px;
        }
        .uploadImg{
            width: 120px;
            height: 100px;
            margin-top: 5px;
        }

        #viewExample{
            position: relative;
            left: 50px;
            top: 60px;
        }
        .uploadExample{
            width: 200px;
            height: 130px;
            margin-bottom: 20px;
        }
    </style>
    <script type="text/javascript">

        $(function(){

            alert(${realAuth.getRealName()});
            //使用my97日期控件
            $("#birthDate").click(function(){
                WdatePicker();
            });

            $("#viewExample").popover({
                html:true,
                content:'正面<img src="/images/upload_source_2.jpg" class="uploadExample"/><br/>反面<img src="/images/upload_source_2_1.jpg" class="uploadExample"/>',
                trigger:"hover",
                placement:"top"
            });

            //把上传身份证正面的a标签变成一个uploadify的组件
            $("#uploadBtn1").uploadify({
                buttonText:"身份证正面",
                fileObjName:"file",
                fileTypeDesc:"身份证正面图片",
                fileTypeExts:"*.gif; *.jpg; *.png",
                multi:false,
                swf:"/js/plugins/uploadify/uploadify.swf",
                uploader:"/doUploadNew",
                overrideEvents:["onUploadSuccess","onSelect"],
                onUploadSuccess:function(file,data){
                    //alert(data);
                    $("#uploadImg1").attr("src",data);
                    $("#uploadImage1").val(data);
                }
            });

            $("#uploadBtn2").uploadify({
                buttonText:"身份证反面",
                fileObjName:"file",
                fileTypeDesc:"身份证反面图片",
                fileTypeExts:"*.gif; *.jpg; *.png",
                multi:false,
                swf:"/js/plugins/uploadify/uploadify.swf",
                uploader:"/doUploadNew",
                overrideEvents:["onUploadSuccess","onSelect"],
                onUploadSuccess:function(file,data){
                    $("#uploadImg2").attr("src",data);
                    $("#uploadImage2").val(data);
                }
            });

            //Ajax提交表单
            $("#realAuthForm").ajaxForm(function(){
                alert("提交表单");
                $.messager.confirm("提示","实名认证申请提交成功!",function(){
                    window.location.reload();
                });
            });
        });
    </script>
</head>

<body>

    <c:if test="${realAuth==null}" var="flag">
        <!-- 功能页面 -->
        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    实名认证
                </div>
                <form class="form-horizontal" id="realAuthForm" method="post" action="/realauthdoInsert" >
                    <fieldset>
                        <div class="form-group">
                            <p class="text-center text-danger">为保护您账户安全，实名认证成功之后不能修改信息，请认真填写！</p>
                        </div>
                        <%--<input type="hidden" name="applier.id" value="3">--%>
                        <%--<div class="form-group">
                            <label class="col-sm-4  control-label" >用户名</label>
                            <div class="col-sm-8">
                                <input class="form-control" name="username" type="text" disabled="disabled"/>
                            </div>
                        </div>--%>
                        <input type="hidden" name="state" value="0">
                        <div class="form-group">
                            <label class="col-sm-4  control-label" >真实姓名</label>
                            <div class="col-sm-8">
                                <input id="realName"  class="form-control" name="realName" type="text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4  control-label" >性别</label>
                            <div class="col-sm-8">
                                <select name="sex" class="form-control">
                                    <option value="0" selected="selected">男</option>
                                    <option value="1">女</option>
                                </select>
                                <%--<input id="sex"  class="form-control" name="sex" type="text">--%>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4  control-label" >身份证号</label>
                            <div class="col-sm-8">
                                <input id="idNumber"  class="form-control" name="idNumber" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4  control-label" >身份证地址</label>
                            <div class="col-sm-8">
                                <input id="address"  class="form-control" name="address" type="text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4  control-label" >出生日期</label>
                            <div class="col-sm-8">
                                <input id="birthDate"  class="form-control" name="birthDate" type="text">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4  control-label" for="address">身份证照片</label>
                            <div class="col-sm-8">
                                <p class="text-help text-primary">请点击“选择图片”,选择证件的正反两面照片。</p>
                                <a href="javascript:;" id="viewExample">查看样板</a>
                                <div class="idCardItem">
                                    <div>
                                        <a href="javascript:;" id="uploadBtn1" >上传正面</a>
                                    </div>
                                    <img alt="" src="" class="uploadImg" id="uploadImg1" />
                                    <input type="hidden" name="image1" id="uploadImage1" />
                                </div>
                                <div class="idCardItem">
                                    <div>
                                        <a href="javascript:;" id="uploadBtn2" >上传反面</a>
                                    </div>
                                    <img alt="" src="" class="uploadImg" id="uploadImg2"/>
                                    <input type="hidden" name="image2" id="uploadImage2" />
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" id="asubmit" class="btn btn-primary col-sm-offset-4" ><i class="icon-ok"></i> 提交认证</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>

    </c:if>
   <c:if test="${realAuth!=null}">
       <div class="col-sm-9">
           <div class="panel panel-default">
               <div class="panel-heading">
                   实名认证
               </div>
               <div class="panel-body">
                   <h4 class="text-success ">你已经通过实名认证</h4>
                   <hr>
                   <table style="width: 100%;height: 100px;">
                       <tbody><tr>
                           <td><span>真实姓名：${realAuth.realName}</span></td>
                           <td><span>性别：${realAuth.getSexDisplay()}</span></td>
                       </tr>
                       <tr>
                           <td><span>证件号码： </span></td>
                           <td><span>出生日期：${realAuth.birthDate}</span></td>
                       </tr>
                       </tbody></table>
               </div>
           </div>
       </div>
   </c:if>

</body>
</html>